<template>
    <div class='prize-wrap'>
        <div class="prize-main">
            <div class="container">
                <div class="lucky-title"><p>请输入手机号</p></div>
                <div class="phone">
                    <input v-model="phoneNumber" placeholder="输入手机号码领奖" type="tel" maxlength="11" style="text"/>
                </div>
                <div class="btn-c" @click="commitInfo">确认领奖</div>
            </div>
            <my-toast v-show="toast_control" toastMsg='提交成功' toastType='alert' toastAction='/mode'></my-toast>
            <my-toast v-show="toast_tel" toastMsg='请正确填写手机号码' toastType='alert' @close='closeToast()'></my-toast>
        </div>
    </div>
</template>

<script>
import Toast from '../components/Toast'
export default {
  data () {
    return {
      prizeId: null,
      recordId: null,
      phoneNumber: '',
      prizeCode: null,
      openId: null,
      toast_control: false,
      prizeOption: null,
      toast_tel: false
    }
  },
  mounted: function () {
    this.prizeId = Number(this.$route.params.prizeId)
    this.recordId = this.$route.params.recordId
    this.prizeCode = this.GLOBAL.player.prizeCode
    this.openId = this.GLOBAL.player.openId
    if (this.prizeId === 1) {
      document.getElementsByTagName('body')[0].className = 'bgimgli'
    } else {
      document.getElementsByTagName('body')[0].className = 'bgimgbig'
    }
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'bgimgli')
    document.body.removeAttribute('class', 'bgimgbig')
  },
  components: {
    myToast: Toast
  },
  methods: {
    commitInfo () {
      let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (this.phoneNumber.length < 11) {
        this.toast_tel = true
      } else if (!phoneReg.test(this.phoneNumber)) {
        this.toast_tel = true
      } else {
        // 提交中奖信息
        this.$http.savePrize(this.recordId, this.phoneNumber).then(
          (result) => {
            this.toast_control = true
          }
        ).catch((error) => {
          console.error(error)
        })
      }
    },
    closeToast () {
      this.toast_tel = false
    }
  }
}
</script>

<style>
.bgimgli {
  background:url('../assets/lottery/bg_27.png') no-repeat;
  background-size:cover;
}
.bgimgbig {
  background:url('../assets/lottery/bg_41.png') no-repeat;
  background-size:cover;
}
.prize-wrap {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.prize-main {
  width:92%;
  height: 100%;
  left:4%;
  position: relative;
}
.container {
  width: 100%;
  top:45%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.lucky-title {
  width: 70%;
  margin-left: 15%;
  line-height: 1.5rem;
  background: url("../assets/lottery/bg_23.png") no-repeat center top;
  background-size: 100%;
  color: white;
  text-align: center;
}
.lucky-title p {
  margin-top:-0.5rem;
  font-size: 1.2rem;
}
.phone {
  text-align: center;
  width: 100%;
  height: 3rem;
  border-radius: 0.3rem;
  background-color:white;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}
.phone input {
    margin: 0.6rem auto;
    font-size: 1.4rem;
    border: 0px;
    text-align: center;
}
.btn-c {
  text-align: center;
  line-height: 2.5rem;
  width: 100%;
  height: 2.5rem;
  border-radius: 0.3rem;
  background-color:rgb(255, 141, 66);
  color: white;
  font-size: 1.3rem;
}
</style>
